<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        #header {
            width: 200px;
            height: 140px;
            margin: 0 auto;
            border-radius: 50%;
            box-shadow: 0px 6px 12px 6px #999, 20px 14px 20px 6px #ddd inset;
            display: flex;
            background-color: #fff;
            position: relative;
            z-index: 999;
        }

        #le {
            width: 30px;
            height: 30px;
            background-color: #000;
            border-radius: 50%;
            margin: 30% 0 0 auto;
        }

        #re {
            width: 30px;
            height: 30px;
            background-color: #000;
            border-radius: 50%;
            margin: 30% auto 0 0;
        }

        #me {
            width: 60px;
            height: 8px;
            border: 3px solid black;
            border-radius: 0 0 50% 50%/0 0 100% 100%;
            border-top: none;
            position: relative;
            margin: 0;
            top: 76px;
        }

        #body1 {
            background-color: #fff;
            margin: 0 auto;
            width: 460px;
            height: 600px;
            border-radius: 50%;
            box-shadow: 0px 0px 30px 8px #bbb inset;
            position: relative;
            top: -50px;
            -z-index: -5;
        }

        #lf {
            background-color: #fff;
            width: 130px;
            height: 170px;
            border-radius: 0 0 20% 50%;
            position: absolute;
            left: 95px;
            box-shadow: 0px 0px 30px 0px #999 inset;
            z-index: -10;
        }

        #rf {
            background-color: #fff;
            width: 130px;
            height: 170px;
            border-radius: 0 0 50% 20%;
            position: absolute;
            right: 95px;
            box-shadow: 0px 0px 30px 0px #999 inset;
            z-index: -10;
        }

        #body2 {

            width: 490px;
            height: 560px;
            background-color: #fff;
            border-radius: 50%;
            box-shadow: 0px -10px 20px 0px #bbb inset;
            position: relative;
            left: -15px;
            top: 80px;
        }

        #duzil {
            width: 50px;
            height: 260px;
            border-radius: 50% 30% 30% 50%;
            box-shadow: 6px 0px 20px 0px #bbb inset;
            position: absolute;
            left: 2px;
            top: 126px;
            transform: skew(-2deg);
        }

        #duzir {
            width: 50px;
            height: 260px;
            border-radius: 30% 50% 50% 30%;
            box-shadow: -6px 0px 20px 0px #bbb inset;
            position: absolute;
            right: 2px;
            top: 126px;
            transform: skew(2deg);
        }

        #la {
            background-color: #fff;
            height: 500px;
            width: 200px;
            border-radius: 70% 50% 80% 50%;
            box-shadow: 6px 0px 20px 0px #ccc inset;
            position: absolute;
            z-index: -999;
            top: 60px;
            left: -46px;
            transform: skew(-8deg);
        }

        #ra {
            background-color: #fff;
            height: 500px;
            width: 200px;
            border-radius: 50% 70% 50% 80%;
            box-shadow: -6px 0px 20px 0px #ccc inset;
            position: absolute;
            z-index: -999;
            top: 60px;
            right: -46px;
            transform: skew(8deg);
        }

        body {
            background-color: rgb(65, 63, 63);
        }

        #yuan {
            width: 80px;
            height: 80px;
            border-radius: 50%;
            box-shadow: 5px 5px 10px 0px #bbb inset;
            border: 1px solid #bbb;
            position: absolute;
            left: 280px;
            top: 26px;
        }

        #bhl {
            background-color: #fff;
            width: 40px;
            height: 160px;
            border-radius: 50% 30% 30% 50%;
            box-shadow: 6px 3px 10px 2px #ccc inset;
            position: absolute;
            left: 4px;
            bottom: 18px;
            z-index: 99;
            transform: skew(12deg);
        }

        #bhr {
            background-color: #fff;
            width: 40px;
            height: 160px;
            border-radius: 30% 50% 50% 30%;
            box-shadow: -6px 3px 10px 2px #ccc inset;
            position: absolute;
            right: 4px;
            bottom: 18px;
            z-index: 99;
            transform: skew(-12deg);
        }

        #fl1 {
            width: 32px;
            height: 72px;
            border-radius: 80% 50% 60% 80%;
            background-color: #fff;
            position: absolute;
            left: 64px;
            bottom: -50px;
            box-shadow: 0px -2px 8px 0px #ccc inset;
            transform: skew(30deg);
        }

        #fl2 {
            width: 32px;
            height: 72px;
            border-radius: 80% 50% 60% 80%;
            background-color: #fff;
            position: absolute;
            left: 70px;
            bottom: -36px;
            box-shadow: 0px -2px 8px 0px #ccc inset;
            transform: skew(36deg);
        }

        #fl3 {
            width: 26px;
            height: 50px;
            border-radius: 50% 80% 80% 60%;
            background-color: #fff;
            position: absolute;
            right: 66px;
            bottom: -24px;
            box-shadow: 0px -2px 8px 0px #ccc inset;
            transform: skew(28deg);
        }

        #fr1 {
            width: 32px;
            height: 72px;
            border-radius: 50% 80% 80% 60%;
            background-color: #fff;
            position: absolute;
            right: 64px;
            bottom: -50px;
            box-shadow: 0px -2px 8px 0px #ccc inset;
            transform: skew(-30deg);
        }

        #fr2 {
            width: 32px;
            height: 72px;
            border-radius: 50% 80% 80% 60%;
            background-color: #fff;
            position: absolute;
            right: 70px;
            bottom: -36px;
            box-shadow: 0px -2px 8px 0px #ccc inset;
            transform: skew(-36deg);
        }

        #fr3 {
            width: 26px;
            height: 50px;
            border-radius: 80% 50% 60% 80%;
            background-color: #fff;
            position: absolute;
            left: 66px;
            bottom: -24px;
            box-shadow: 0px -2px 8px 0px #ccc inset;
            transform: skew(-28deg);
        }
    </style>
</head>

<body>
    <div id="header">
        <div id="le"></div>
        <div id="me"></div>
        <div id="re"></div>
    </div>
    <div id="body1">
        <div id="la">
            <div id="bhl"></div>
            <div id="fl1"></div>
            <div id="fl2"></div>
            <div id="fl3"></div>
        </div>
        <div id="ra">
            <div id="bhr"></div>
            <div id="fr1"></div>
            <div id="fr2"></div>
            <div id="fr3"></div>
        </div>
        <div id="body2">
            <div id="yuan"></div>
            <div id="duzil"></div>
            <div id="duzir"></div>
        </div>
        <div id="lf"></div>
        <div id="rf"></div>
    </div>

</body>

</html>